(function ($) {
    //计算小区域大小
    $.fn.extend({
        //登录后效果
        login() {
            let userStr = JSON.parse(localStorage.getItem("user")) || "[]";
            if (userStr == "[]") {
                return;
            } else {
                $(".uname").html(userStr.u_name);
                $(".uname").attr("href", "");
                $(".break").html("退出");
                if ($(".break").html() == "退出") {
                    $(".break").attr("href", "");
                    $(".break").on("click", function () {
                        localStorage.clear("user");
                    })
                }
                $(".hide").hide();
            }
        },
        move() {
            $(".middleArea").css({
                "height": $(".middleimg").height() / $(".bigimg").height() * $(".bigArea").height(),
                "width": $(".middleimg").width() / $(".bigimg").width() * $(".bigArea").width(),
            })
            $(".middleimg").on("mouseenter", _.throttle(function () {
                $(".middleArea").show();
                $(".bigArea").show();
                $(document).on("mousemove", function (e) {
                    let mX = e.pageX - $(".middleimg").offset().left - $(".middleArea").width() / 2;
                    let mY = e.pageY - $(".middleimg").offset().top - $(".middleArea").height() / 2;
                    if (mX <= 0) {
                        mX = 0;
                    }
                    if (mX >= $(".middleimg").width() - $(".middleArea").width()) {
                        mX = $(".middleimg").width() - $(".middleArea").width();
                    }
                    if (mY <= 0) {
                        mY = 0;
                    }
                    if (mY >= $(".middleimg").height() - $(".middleArea").height()) {
                        mY = $(".middleimg").height() - $(".middleArea").height();
                    }
                    $(".middleArea").css({
                        left: mX,
                        top: mY
                    })
                    let oScole = $(".bigArea").width() / $(".middleArea").width()
                    $(".bigimg").css(
                        {
                            left: -mX * oScole,
                            top: -mY * oScole
                        }
                    );
                })
            }, 40)).on("mouseleave", function () {
                $(".middleArea").hide()
                $(".bigArea").hide()
            })
        },
        //点击切换图片
        click() {
            this.children().on("click", function () {
                $(".middleimg>.picture").attr("src", `./image/fangdajin${$(this).index() + 1}.jpg`);
                $(".bigimg").attr("src", `./image/${$(this).index() + 1}_n_10175_1200x1200.jpg`);
                $(this).children().addClass("noOpacity").parent("li").siblings().children().removeClass("noOpacity");
            })
        },
        //点击改变类名
        changeClass(str) {
            this.children().on("click", function () {
                $(this).addClass(str).siblings().removeClass(str);
            })
        },
        changeNum() {
            let self = this;
            this.find(".arrow>.topArrow").on("click", function () {
                let num = self.find(".numberBox>input").attr("value");
                self.find(".numberBox>input").attr("value", parseInt(num) + 1);
                self.find(".icon2").addClass("curPoint2");
                if (num >= 4) {
                    self.find(".numberBox>input").attr("value", 5);
                    $(this).children().addClass("curPoint1");
                }
            })
            this.find(".arrow>.bottomArrow").on("click", function () {
                let num = self.find(".numberBox>input").attr("value");
                self.find(".numberBox>input").attr("value", parseInt(num) - 1);
                self.find(".icon1").removeClass("curPoint1");
                if (num <= 2) {
                    self.find(".numberBox>input").attr("value", 1);
                    self.find(".icon2").removeClass("curPoint2");

                }
            })
        },
        shoppingcart() {
            let strHtml;
            //获取cookie值
            let str = JSON.parse($.cookie("userData") || '[]');
            //麓谷cookie不为空,就将cookie内容显示
            if (str != "") {
                //先将之前的内容隐藏
                $(".notLogin").hide();
                strHtml = "";
                str.forEach((el) => {
                    strHtml += `<div class="Login cleanFix">`;
                    strHtml += ` <img src="${el.imgsrc}" style="width:80px;height:80px;float:left;">`;
                    strHtml += ` <div class="con"><h1>${el.goods}</h1><h2>规格:${el.type}</h2> <h3>价格:${el.price}<i>X${el.num}</i></h3></div>`;
                    strHtml += `</div>`;
                    $(".shoppingnum").html(`${parseInt(el.num) + parseInt($(".shoppingnum").html())}`);
                })
                $(".shopshow").append(strHtml);
            }
            //绑定点击事件
            $(".lastButton .addCart").on("click", function () {
                //将数据存入cookies
                let Data = {
                    id: Date.now(),
                    imgsrc: $(".middleimg").find(".picture").attr("src"),
                    goods: $(".testBox>h1").html(),
                    type: $(".boxList>.current>span").html(),
                    price: $(".Price>.three").html(),
                    num: $(".numberBox>input").attr("value")
                };
                let strdata = JSON.parse($.cookie("userData") || '[]');
                strdata.push(Data);
                $.cookie("userData", JSON.stringify(strdata), { expires: 7 });
                //克隆图片
                let $cloneImg = $(".middleimg").find(".picture").clone(true);
                //2.添加到页面上,与原来的图片重合到一起
                $cloneImg.css($(".middleimg").find(".picture").position());  //{left:xx,top:xxx}
                $cloneImg.css('position', "absolute");//图片要飞,就需要 定位
                $(".middleimg").append($cloneImg);
                //4. 让克隆的图片,飞到指定的地方
                let target = $(".shoppingbag").offset();
                target.top = target.top - $(".middleimg").find(".picture").offset().top + $(".shoppingbag").height();
                target.left = target.left - $(".middleimg").find(".picture").offset().left;
                target.height = 0;
                target.width = 0;
                //飞完后,删除克隆的img标签,再将内存img添加到目标位置,同时
                $cloneImg.eq(0).stop().animate(target, 1000, function () {
                    $cloneImg.remove()
                    //修改购物车件数
                    let num = $(".numberBox>input").attr("value");
                    $(".shoppingnum").html(`${parseInt(num) + parseInt($(".shoppingnum").html())}`);
                    //判断购物车件数是否为0
                    if ($(".shoppingnum").html() != 0) {
                        $(".notLogin").hide();
                    } else {
                        $(".notLogin").show();
                        return;
                    }
                    //获取cookie值
                    let str1 = JSON.parse($.cookie("userData") || '[]');
                    str1.forEach((el) => {
                        strHtml = "";
                        strHtml += `<div class="Login cleanFix">`;
                        strHtml += ` <img src="${el.imgsrc}" style="width:80px;height:80px;float:left;">`;
                        strHtml += ` <div class="con"><h1>${el.goods}</h1><h2>规格:${el.type}</h2> <h3>价格:￥${el.price}<i>X${el.num}</i></h3></div>`;
                        strHtml += `</div>`;
                    })
                    $(".shopshow").append(strHtml);

                });

            })

        },
        //页面跳转
        location() {
            $(this).find("a").on("click", function () {
                $(".shoppingbag").find("a").attr("href", "cart.html");
            })
        }
    })
})(jQuery)
$(function () {
    $(window).move()
    $(".smallimg>.picture").click();
    $(".producttype>.boxList").changeClass("current");
    $(".numberAndLimit>.number").changeNum();
    $(".lastButton").shoppingcart();
    $(".shoppingbag").location();
    $(".h-content").login();
    $("img.lazy").lazyload({ threshold: 180 });
})